<!--
 * @Description: 
 * @Author: 【大白菜】2601779853@qq.com
 * @Date: 2022-03-14 16:25:05
 * @LastEditTime: 2022-03-15 11:44:04
 * @LastEditors: 【大白菜】2601779853@qq.com
-->
<template>
  <div>
    <el-form
      :model="editPram"
      :rules="rules"
      ref="editPram"
      label-width="140px"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="editPram.name"
          maxlength="4"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="分类图标(80*80)" prop="image">
        <div class="upLoadPicBox" @click="modalPicTap('1')">
          <div v-if="editPram.image" class="pictrue">
            <img :src="editPram.image" />
          </div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="第一段介绍" prop="desc1">
        <el-input
          type="textarea"
          v-model="editPram.desc1"
          placeholder="请输入第一段介绍"
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="第二段介绍" prop="desc2">
        <el-input
          type="textarea"
          v-model="editPram.desc2"
          placeholder="请输入第二段介绍"
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="editPram.sort" :min="0" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="editPram.status"
          active-text="显示"
          inactive-text="隐藏"
          :active-value="true"
          :inactive-value="false"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loadingBtn"
          @click="handlerSubmit('editPram')"
          v-hasPermi="['admin:advantage:update']"
          >确定</el-button
        >
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingBtn: false,
      editPram: {
        name: "",
        image: "",
        sort: 0,
        status: true,
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入优势名称", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
        ],
        image: [
          { required: true, message: "请选择优势图标", trigger: "change" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        desc1: [
          { required: true, message: "请填写第一段介绍", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        desc2: [
          { required: true, message: "请填写第二段介绍", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 点击商品图
    modalPicTap(tit) {
      let _this = this
      this.$modalUpload(
        function (img) {
          _this.editPram.image = img[0].sattDir
        },
        tit,
        "store"
      );
    },
    close() {
      this.$emit("hideEditDialog");
    },
    handlerSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return;
        this.$emit('hideEditDialog')
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>